<template>
  <page-header-wrapper :title="false">
    <div class="Role">
      <a-spin tip="加载中..." class="position" v-if="roleLoading"> </a-spin>
      <typicalSearch ref="insideSearch" :searchConfig="searchConfig" @searchMethod="getTableData"></typicalSearch>
      <div class="table">
        <div class="tableTitle">
          <div class="title">告警分类统计</div>
        </div>
        <div class="tableList">
          <typicalTable
            ref="insideTable"
            :tableConfig="tableConfig"
            :tableData="tableData"
            @getTableData="getTableData"
          >
          </typicalTable>
        </div>
      </div>
    </div>
  </page-header-wrapper>
</template>
<script>
import moment from 'moment';
import typicalSearch from '@/components/typicalSearch';
import typicalTable from '@/components/typicalTable';
import Input from '@/components/typicalControl/Input';
import InputNumber from '@/components/typicalControl/InputNumber';
import treeSelect from '@/components/typicalControl/treeSelect';
import Select from '@/components/typicalControl/select';
import Button from '@/components/typicalControl/button';
import Details from '@/views/equipmentControl/parameterSending/details.vue';
import { getYesNo } from '@/utils/frequentInterface';

import { equipmentMonitoring, listNetworksAll } from '@/api/cabin';
import { organizationsTree, alarms } from '@/api/system';

export default {
  name: 'RunningState',
  components: {
    typicalSearch: typicalSearch,
    typicalTable: typicalTable,
    Input: Input,
    InputNumber: InputNumber,
    treeSelect: treeSelect,
    Select: Select,
    Button: Button,
    Details: Details,
  },
  data() {
    return {
      roleLoading: false, // 加载表格的loading
      detailsVisible: false,
      originationCode: '',
      form: {},
      // 搜索组件配置
      searchConfig: {
        formItemList: [
          {
            type: 'select',
            prop: 'searchStatistic',
            value: 'MONTH',
            label: '统计方式',
            optList: [
              { name: '年', code: 'YEAR' },
              { name: '月', code: 'MONTH' },
              { name: '日', code: 'DAY' },
            ],
            change: this.modeChange,
          },
          {
            type: 'datePicker',
            dateType: 'month',
            prop: 'searchStartDate',
            valueFormat: 'YYYYMM',
            format: 'YYYY-MM',
            value: moment(new Date()).format('YYYY-MM'),
            label: '开始时间',
            change: this.datePickerChange,
          },
          {
            type: 'datePicker',
            dateType: 'month',
            prop: 'searchEndDate',
            valueFormat: 'YYYYMM',
            format: 'YYYY-MM',
            value: moment(new Date()).format('YYYY-MM'),
            label: '结束时间',
            change: this.datePickerChange,
          },
          {
            type: 'selectTree',
            prop: 'searchOrganization',
            value: undefined,
            label: '所属组织',
            treeData: [],
            select: this.treeSelect,
          },
          {
            type: 'input',
            prop: 'searchName',
            value: undefined,
            label: '告警名称',
          },
        ],
        parent: this,
      },
      // 列表组件配置
      tableConfig: {
        columns: [
          {
            title: '告警名称',
            dataIndex: 'name',
            ellipsis: true,
          },
          {
            title: '统计时间',
            dataIndex: 'statisticalTime',
            ellipsis: true,
            width: '25%',
          },
          {
            title: '告警数量',
            dataIndex: 'total',
            ellipsis: true,
          },
          {
            title: '发生中数量',
            dataIndex: 'occuring',
            ellipsis: true,
          },

          {
            title: '已结束数量',
            dataIndex: 'ended',
            ellipsis: true,
          },
        ],
        pageSize: this.$store.state.user.defaultPaginationPagesize,
        pageSizeOptions: this.$store.state.user.defaultPaginationOptions,
        parent: this,
      },
      // 列表组件数据
      tableData: {
        records: [],
        total: 0,
      },
      currentId: '',
      oDictionary: {
        listNetworksAll: [],
      },
    };
  },
  created() {
    this.getDictionary();
  },
  mounted() {
    this.$refs.insideSearch.searchInfo();
  },
  methods: {
    /**
     * [getDictionary 获取各种字典]
     * @return {[type]} [description]
     */
    getDictionary() {
      // 组织列表树形结构数据
      organizationsTree().then((res) => {
        if (res.code === 200) {
          for (var i = 0; i < this.searchConfig.formItemList.length; i++) {
            if (this.searchConfig.formItemList[i].prop === 'searchOrganization') {
              this.searchConfig.formItemList[i].treeData = res.data;
              break;
            }
          }
        }
      });
    },

    /**
     * [searchOptListDynamicLoading 搜索下拉动态加载]
     * @param  {[type]} searchOrganization [组织机构id]
     * @return {[type]}                      [description]
     */
    treeSelect(e) {
      this.originationCode = e.code;
    },
    /**
     * [getTableData 获取表格数据]
     * @param  {[type]} searchParam [搜索条件]
     * @return {[type]}             [description]
     */
    getTableData(searchParam) {
      if (!searchParam) throw new Error('getTableData 没有入参搜索条件！');
      this.roleLoading = true;
      let endTime = '';
      if (searchParam.searchStatistic == 'YEAR') {
        endTime = moment(searchParam.searchEndDate).endOf('year');
      } else if (searchParam.searchStatistic == 'MONTH'&&
        moment(new Date()).format('YYYY-MM-DD') != moment(searchParam.searchEndDate).format('YYYY-MM-DD')) {
        endTime = moment(searchParam.searchEndDate).endOf('month');
      } else {
        endTime = searchParam.searchEndDate;
      }
      let params = {
        pageNum: searchParam && searchParam.pageNumber ? (searchParam.pageNumber+1) : 1,
        pageSize: searchParam && searchParam.pageSize ? searchParam.pageSize : 10,
        statisticsMode: searchParam.searchStatistic,
        startDate: moment(new Date(searchParam.searchStartDate)).format('YYYY-MM-DD') + ' ' + '00:00:00',
        endDate: moment(new Date(endTime)).format('YYYY-MM-DD') + ' ' + '23:59:59',
        code: searchParam.searchOrganization ? this.originationCode : '',
        name: searchParam.searchName,
      };
      alarms('/select', 'post', params)
        .then((res) => {
          if (res.code == 200) {
            let params = {
              records: res.data,
              total: Number(res.total),
            };
            this.tableData = params;
          } else {
            this.tableData.records = [];
            this.tableData.total = 0;
          }
        })
        .finally(() => {
          this.roleLoading = false;
        });
    },
    formatterTime(val) {
      return val ? moment(val).format('YYYY-MM-DD') : '';
    },

    datePickerChange() {},
    modeChange(e) {
      switch (e) {
        case 'YEAR':
          this.searchConfig.formItemList[1].dateType = 'year';
          this.searchConfig.formItemList[1].valueFormat = 'YYYY';
          this.searchConfig.formItemList[1].format = 'YYYY';
          this.searchConfig.formItemList[1].value = moment(new Date()).format('YYYY');

          this.searchConfig.formItemList[2].dateType = 'year';
          this.searchConfig.formItemList[2].valueFormat = 'YYYY';
          this.searchConfig.formItemList[2].format = 'YYYY';
          this.searchConfig.formItemList[2].value = moment(new Date()).format('YYYY');
          break;

        case 'MONTH':
          this.searchConfig.formItemList[1].dateType = 'month';
          this.searchConfig.formItemList[1].valueFormat = 'YYYYMM';
          this.searchConfig.formItemList[1].format = 'YYYY-MM';
          this.searchConfig.formItemList[1].value = moment(new Date()).format('YYYY-MM');

          this.searchConfig.formItemList[2].dateType = 'month';
          this.searchConfig.formItemList[2].valueFormat = 'YYYYMM';
          this.searchConfig.formItemList[2].format = 'YYYY-MM';
          this.searchConfig.formItemList[2].value = moment(new Date()).format('YYYY-MM');
          break;
        case 'DAY':
          this.searchConfig.formItemList[1].dateType = 'date';
          this.searchConfig.formItemList[1].valueFormat = 'YYYYMMDD';
          this.searchConfig.formItemList[1].format = 'YYYY-MM-DD';
          this.searchConfig.formItemList[1].value = moment(new Date()).format('YYYY-MM-DD');

          this.searchConfig.formItemList[2].dateType = 'date';
          this.searchConfig.formItemList[2].valueFormat = 'YYYYMMDD';
          this.searchConfig.formItemList[2].format = 'YYYY-MM-DD';
          this.searchConfig.formItemList[2].value = moment(new Date()).format('YYYY-MM-DD');
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.Role {
  width: 100%;
  height: calc(100vh - 150px);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  position: relative;
  .position {
    width: 100%;
    height: 100%;
    background: white;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
  }
  .table {
    flex: 1;
    background: white;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    .tableTitle {
      width: 100%;
      height: 64px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ececec;
      padding: 0 20px;
      margin-bottom: 10px;
      .title {
        width: 80%;
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: 550;
      }
      .addButton {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
    }
    .tableList {
      // max-height: calc(100vh - 380px);
      // overflow: auto;
      /deep/ .tableScroll {
        max-height: calc(100vh - 380px);
        overflow: auto;
      }
    }
  }
}
.Row {
  position: relative;
  overflow: hidden;
  clear: both;
}
.lefeLabel {
  float: left;
  width: 120px;
  text-align: right;
}
.rightText {
  float: left;
  width: -webkit-calc(100% - 130px);
  width: -moz-calc(100% - 130px);
  width: calc(100% - 130px);
  margin-left: 5px;
  margin-bottom: 10px;
  font-size: 16px;
  color: #000000;
}
#modalContent {
  width: 100%;
  height: 350px;
  overflow: auto;
  position: relative;
}
</style>
